<template>
  <div>
    <!--<a-button type="primary">添加</a-button>-->
    <div class="main_operation">
      <div>
        <Prompter @search="lineSearch" :all="dataLists.total"></Prompter>
      </div>
      <div class="operation_right">
        <!-- <a-input-group style="width: 400px;"  compact> -->
          <a-select style="width:120px;" v-model="inputType">
            <a-select-option value="0">设备分组</a-select-option>
            <a-select-option value="1">设备名称</a-select-option>
          </a-select>
          <a-input-search style="width:280%;" enterButton @search="onSearch" :placeholder="isInputType" />
      <!-- </a-input-group> -->
      </div>
    </div>
    <!-- bordered -->
    <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data"
      :rowKey="record => record.id" :scroll="{y: 500 }">
      <template slot="status" slot-scope="text, record">
        <a-icon v-if="record.status == '在线'" title="在线" theme="filled" style="fontSize: 24px; color: #52c41a;" type="check-circle" />
        <a-icon v-else title="离线" theme="filled" style="fontSize: 24px;color: #fe5d58;" type="exclamation-circle" />
      </template>
      <template slot="report" slot-scope="text, record">
        <a style="color: #0000cc;" href="javascript:void(0);" @click="onreport(record)">{{text}}</a>
      </template>
      <template slot="name" slot-scope="text, record">
          <a style="color: #0000cc;" href="javascript:void(0);" @click="onName(record)">{{text}}</a>
      </template>
    </a-table>
    <div class="pageBox">
      <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page"
        :defaultCurrent="1" @change="pageChange" />
    </div>
    <a-drawer
      :title="titleModel"
      placement="right"
      width='94%'
      @close="onClose"
      :visible="detaiVisible"
    >
      <RealTime v-if="detaiVisible" :itemDetail="itemData"></RealTime>
    </a-drawer>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  import Prompter from '@C/Prompter/'; //提示器
  import RealTime from './components/RealTime';

  export default {
    name: "List",
    components: {
      RealTime,
      Prompter
    },
    data() {
      return {

        titleModel: '设备名称',
        /* 通用模块 */
        //列表
        tableLoad: false, //列表loading状态
        formList: { //列表信息
          page: 1
        },
        /* 通用模块end */
        detaiVisible: false, //详情窗口
        itemData: {},
        inputType: '0',
      }
    },
    mounted() {
      if (this.$route.query.equipmentId) {
        this.formList.id = this.$route.query.equipmentId
      }
      this.changeData()
    },
    computed: {
      ...mapState({
        Fields: state => state.controlCenter.Fields,
        dataLists: state => state.controlCenter.dataLists,
        requestCode: state => state.controlCenter.requestCode,
      }),
      isInputType(){
      if (this.inputType == '0') {
        return '请输入设备分组'
      } else if (this.inputType == '1') {
        return '请输入设备名称'
      }
    },
    },
    watch: {
      dataLists(newData,oldData){
        if (this.$route.query.equipmentId) {
          this.onName(newData.data[0])
        }
      }
    },
    methods: {
      /* 通用模块 */
      ...mapActions({
        getLists: 'controlCenter/getLists', //设备列表
      }),
      // 重新获取列表数据
      changeData() {
        this.tableLoad = true
        setTimeout(() => {
          this.getLists(this.formList)
          this.tableLoad = false
        }, 800);
      },
      //搜索
      onSearch(val) {
        if (this.$route.query.equipmentId) {
          this.$router.push({
            query: {
              equipmentId : undefined
            }
          })
        }
        console.log(val)
        if (this.inputType == '0') {
          this.formList = { //列表信息
            group_name: val,
            page: 1
          }
        } else if (this.inputType == '1'){
          this.formList = { //列表信息
            name: val,
            page: 1
          }
        }
        this.changeData()
      },
      lineSearch(type) {
        console.log(type);
        if (type === 0 || type === 1) {
          this.formList = {
            is_online: type,
            page: 1
          }
        } else if (type === 2) {
          this.formList = {
            page: 1
          }
        }
        this.changeData()
      },
      // 页码
      pageChange(page) {
        this.formList.page = page;
        this.getLists(this.formList)
      },
      /* 通用模块end */
      onName(record) {
        console.log(record)
        this.itemData = record
        this.titleModel = record.name
        // this.titleModel = record.name + '(' + record.type_name + ')'
        this.detaiVisible = true
      },
      onreport(item) {
        this.$router.push({
          path: '/data_center/statistics',
          query: {
            equipmentId : item.id,
          }
        })
      },
      // 抽屉取消
      onClose() {
        this.detaiVisible = false
      },
    },

  }
</script>

<style scoped lang="stylus">

</style>
